<#cenluan title="发起投票"  menu="vote">
	<ol class="breadcrumb">
		<li class=""><a href="/vote">投票</a></li>
		<li class="active">发起投票</li>
	</ol>
	<%if(!isEmpty(msg)){%>
	<div class="alert alert-danger text-center">
		<button class="close" data-dismiss="alert">X</button>
		${msg}
	</div>
	<%}%>
	<form class="form-horizontal" action="/vote/save" method="post" id="voteForm">
		${token}
		<div class="form-group">
			<label class="control-label col-md-2">类型</label>
			<div class="col-md-8">
				<label class="radio-inline">
					<input type="radio" checked="checked" name="vote.type" value="SINGLE">单选
				</label>
				<label class="radio-inline">
					<input type="radio" name="vote.type" value="MULTIPLE">多选
				</label>
			</div>
		</div>
		<div class="form-group">
			<label class="control-label col-md-2">标题</label>
			<div class="col-md-5">
				<textarea class="form-control" placeholder="100字以内" style="resize:vertical;" name="vote.title"
				maxlength="100"></textarea>
			</div>
		</div>
		<!-- 选项 -->
		<div class="form-group">
			<label class="control-label col-md-2">选项</label>
			<div class="col-md-5">
				<input class="form-control" placeholder="20字以内" name="option" maxlength='20'>
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-5 col-md-offset-2">
				<input class="form-control" placeholder="20字以内" name="option" maxlength='20'>
			</div>
		</div>
		<div class="form-group" id="form-group-action">
			<div class="col-md-2 col-md-offset-2 mb20">
				<button class="btn btn-default btn-block" type="button" id="btn-add-option">
					<span class="glyphicon glyphicon-plus"></span>&nbsp;添加选项
				</button>
			</div>
			<div class="col-md-3">
				<button class="btn btn-primary btn-block" type="submit">保存</button>
			</div>
		</div>
	
	</form>
	<script>
		$(function() {
			var optionTemplate = "<div class='form-group'>" + "<div class='col-md-5 col-md-offset-2'>" + "<div class='input-group'>"
					+ "<input class='form-control' placeholder='20字以内' name='option' maxlength='20'>" + "<span class='input-group-btn'>"
					+ "<button class='btn btn-default btn-del'>" + "<span class='glyphicon glyphicon-remove-circle'></span></button>" + "</span>"
					+ "</div></div></div>";
			$("#voteForm").submit(function(){
				var title = $("[name='vote.title']");
				if(!$.trim(title.val())){
					title.parent().addClass("has-error").removeClass("has-success");
					title.focus();
					return false;
				}else{
					title.parent().removeClass("has-error").addClass("has-success");
				}
				var optionCheck = true;
				$.each($("[name='option']"),function(){
					if(!$.trim($(this).val())){
						$(this).parent().addClass("has-error").removeClass("has-success");
						optionCheck = false;
						$(this).focus();
						return;
					}else{
						$(this).parent().removeClass("has-error").addClass("has-success");
					}
				});
				if(!optionCheck){
					return false;
				}
				$("#form-group-action button").button("loading");
				return true;
			});
			$("#btn-add-option").click(function() {
				if($("[name='option']").length>=10){
					$(this).addClass("disabled");
					return;
				}
				var template = $(optionTemplate);
				template.find(".btn-del").click(function(){
					template.remove();
					if($("[name='option']").length<10){
						$("#btn-add-option").removeClass("disabled");
					}
				});
				$("#form-group-action").before(template);
			});
		});
	</script>
</#cenluan>